﻿<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>乐优商城--商品详情页</title>
	<link rel="icon" href="/assets/img/favicon.ico">

	<link rel="stylesheet" type="text/css" href="/css/webbase.css" />
	<link rel="stylesheet" type="text/css" href="/css/pages-item.css" />
	<link rel="stylesheet" type="text/css" href="/css/pages-zoom.css" />
	<link rel="stylesheet" type="text/css" href="/css/widget-cartPanelView.css" />

	<style type="text/css">
		.goods-intro-list li {
			display: inline-block;
			width: 300px;
		}
		.Ptable {
			margin: 10px 0;
		}
		.Ptable-item {
			padding: 12px 0;
			line-height: 220%;
			color: #999;
			font-size: 12px;
			border-bottom: 1px solid #eee;
		}
		.Ptable-item h3 {
			width: 110px;
			text-align: right;
		}
		.Ptable-item h3, .package-list h3 {
			font-weight: 400;
			font-size: 12px;
			float: left;
		}
		h3 {
			display: block;
			font-size: 1.17em;
			-webkit-margin-before: 1em;
			-webkit-margin-after: 1em;
			-webkit-margin-start: 0px;
			-webkit-margin-end: 0px;
			font-weight: bold;
		}
		.Ptable-item dl {
			margin-left: 110px;
		}
		dl {
			display: block;
			-webkit-margin-before: 1em;
			-webkit-margin-after: 1em;
			-webkit-margin-start: 0px;
			-webkit-margin-end: 0px;
		}
		.Ptable-item dt {
			width: 160px;
			float: left;
			text-align: right;
			padding-right: 5px;
		}
		.Ptable-item dd {
			margin-left: 210px;
		}
		dd {
			display: block;
			-webkit-margin-start: 40px;
		}
		.package-list {
			padding: 12px 0;
			line-height: 220%;
			color: #999;
			font-size: 12px;
			margin-top: -1px;
		}
		.package-list h3 {
			width: 130px;
			text-align: right;
		}
		.package-list p {
			margin-left: 155px;
			padding-right: 50px;
		}
	</style>

</head>

<body>

<!-- 头部栏位 -->
<!--页面顶部，由js动态加载-->
<div id="itemApp">
	<div id="nav-bottom">
		<ly-top/>
	</div>
	<div class="py-container">
		<div id="item">
			<div class="crumb-wrap">
				<ul class="sui-breadcrumb">
					<li>
						<a href="#">手机</a>
					</li>
					<li>
						<a href="#">手机通讯</a>
					</li>
					<li>
						<a href="#">手机</a>
					</li>
					<li>
						<a href="#">华为（HUAWEI）</a>
					</li>
					<li class="active">荣耀 V10 高配版 6GB+64GB </li>
				</ul>
			</div>
			<!--product-info-->
			<div class="product-info">
				<div class="fl preview-wrap">
					<!--放大镜效果-->
					<div class="zoom">
						<!--默认第一个预览-->
						<div id="preview" class="spec-preview">
							<span class="jqzoom">
								<img :jqimg="images[0]" :src="images[0]" width="400px" height="400px"/>
							</span>
						</div>
						<!--下方的缩略图-->
						<div class="spec-scroll">
							<a class="prev">&lt;</a>
							<!--左右按钮-->
							<div class="items">
								<ul>
									<li v-for="img in images">
										<img :src="img" :bimg="img" onmousemove="preview(this)"/>
									</li>
								</ul>
							</div>
							<a class="next">&gt;</a>
						</div>
					</div>
				</div>
				<div class="fr itemInfo-wrap">
					<div class="sku-name">
						<h4 v-text="sku.title"></h4>
					</div>
					<div class="news"><span>麒麟970！全面屏！2000万AI变焦双摄！<a href='http://sale.jd.com/act/L1Y2V6ERZePab4.html' target='_blank'>荣耀10 99元定金预售，点击进入》》》</a></span></div>
					<div class="summary">
						<div class="summary-wrap">
							<div class="fl title"><i>价　　格</i></div>
							<div class="fl price">
								<i>¥</i><em v-text="ly.formatPrice(sku.price)"></em><span>降价通知</span>
							</div>
							<div class="fr remark"><i>累计评价</i><em>612188</em></div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>促　　销</i>
							</div>
							<div class="fl fix-width">
								<i class="red-bg">加价购</i>
								<em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换
									购热销商品</em>
							</div>
						</div>
					</div>
					<div class="support">
						<div class="summary-wrap">
							<div class="fl title">
								<i>支　　持</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">以旧换新，闲置手机回收 4G套餐超值抢 礼品购</em>
							</div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>配 送 至</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">上海 <span v-text="sku.stock > 0 ? '有货' : '缺货'"></span></em>
							</div>
						</div>
					</div>
					<div class="clearfix choose">
						<div id="specification" class="summary-wrap clearfix">
							<dl v-for="(options,id) in specialSpec" :key="id">
								<dt>
									<div class="fl title">
										<i v-text="params[id]"></i>
									</div>
								</dt>
								<dd v-for="(o,i) in options" :key="i" @click="selectSku(id,i)">
									<a href="javascript:;" :class="{selected:i === indexes[id], locked:locked(id, i)}">
										{{o}}<span title="点击取消选择">&nbsp;</span>
									</a>
								</dd>
							</dl>
						</div>

						<div class="summary-wrap">
							<div class="fl title">
								<div class="control-group">
									<div class="controls">
										<input autocomplete="off" type="text" disabled v-model="num" minnum="1"
											   class="itxt"/>
										<a href="javascript:void(0)" class="increment plus" @click="increment">+</a>
										<a href="javascript:void(0)" class="increment mins" @click="decrement">-</a>
									</div>
								</div>
							</div>
							<div class="fl">
								<ul class="btn-choose unstyled">
									<li>
										<a href="#" @click.prevent="addCart" target="_blank"
										   class="sui-btn  btn-danger addshopcar">加入购物车</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--product-detail-->
			<div class="clearfix product-detail">
				<div class="fl aside">
					<ul class="sui-nav nav-tabs tab-wraped">
						<li class="active">
							<a href="#index" data-toggle="tab">
								<span>相关分类</span>
							</a>
						</li>
						<li>
							<a href="#profile" data-toggle="tab">
								<span>推荐品牌</span>
							</a>
						</li>
					</ul>
					<div class="tab-content tab-wraped">
						<div id="index" class="tab-pane active">
							<ul class="part-list unstyled">
								<li>手机</li>
								<li>手机壳</li>
								<li>内存卡</li>
								<li>Iphone配件</li>
								<li>贴膜</li>
								<li>手机耳机</li>
								<li>移动电源</li>
								<li>平板电脑</li>
							</ul>
							<ul class="goods-list unstyled">
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part01.png"/>
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part02.png"/>
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part03.png"/>
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part02.png"/>
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part03.png"/>
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
							</ul>
						</div>
						<div id="profile" class="tab-pane">
							<p>推荐品牌</p>
						</div>
					</div>
				</div>
				<div class="fr detail">
					<div class="clearfix fitting">
						<h4 class="kt">选择搭配</h4>
						<div class="good-suits">
							<div class="fl master">
								<div class="list-wrap">
									<div class="p-img">
										<img src="/img/_/l-m01.png"/>
									</div>
									<em>￥5299</em>
									<i>+</i>
								</div>
							</div>
							<div class="fl suits">
								<ul class="suit-list">
									<li class="">
										<div id="e">
											<img src="/img/_/dp01.png"/>
										</div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
											<input type="checkbox"><span>39</span>
										</label>
									</li>
									<li class="">
										<div id=""><img src="/img/_/dp02.png"/></div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
											<input type="checkbox"><span>50</span>
										</label>
									</li>
									<li class="">
										<div id=""><img src="/img/_/dp03.png"/></div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
											<input type="checkbox"><span>59</span>
										</label>
									</li>
									<li class="">
										<div id=""><img src="/img/_/dp04.png"/></div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
											<input type="checkbox"><span>99</span>
										</label>
									</li>
								</ul>
							</div>
							<div class="fr result">
								<div class="num">已选购0件商品</div>
								<div class="price-tit"><strong>套餐价</strong></div>
								<div class="price">￥5299</div>
								<button class="sui-btn  btn-danger addshopcar">加入购物车</button>
							</div>
						</div>
					</div>
					<div class="tab-main intro">
						<ul class="sui-nav nav-tabs tab-wraped">
							<li class="active">
								<a href="#one" data-toggle="tab">
									<span>商品介绍</span>
								</a>
							</li>
							<li>
								<a href="#two" data-toggle="tab">
									<span>规格与包装</span>
								</a>
							</li>
							<li>
								<a href="#three" data-toggle="tab">
									<span>售后保障</span>
								</a>
							</li>
							<li>
								<a href="#four" data-toggle="tab">
									<span>商品评价</span>
								</a>
							</li>
							<li>
								<a href="#five" data-toggle="tab">
									<span>手机社区</span>
								</a>
							</li>
						</ul>
						<div class="clearfix"></div>
						<div class="tab-content tab-wraped">
							<div id="one" class="tab-pane active">
								<ul class="goods-intro-list unstyled" style="list-style: none;">
									<li>分辨率：1920*1080(FHD)</li>
									<li>后置摄像头：1200万像素</li>
									<li>前置摄像头：500万像素</li>
									<li>核 数：其他</li>
									<li>频 率：以官网信息为准</li>
									<li>品牌： Apple</li>
									<li>商品名称：APPLEiPhone 6s Plus</li>
									<li>商品编号：1861098</li>
									<li>商品毛重：0.51kg</li>
									<li>商品产地：中国大陆</li>
									<li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
									<li>系统：苹果（IOS）</li>
									<li>像素：1000-1600万</li>
									<li>机身内存：64GB</li>
								</ul>
								<!--商品详情-->
								<div class="intro-detail">
									<div><div style="width:750px;margin:0 auto; position:relative"> 
 <img src="//img30.360buyimg.com/cms/jfs/t19396/307/363903002/275891/b3de14c/5a700f2fNd70a9a54.jpg" /> 
 <img src="//img13.360buyimg.com/cms/jfs/t13114/339/1258812916/68102/881752e6/5a1ce078Na7ea9a28.jpg" /> 
 <div style="width:750px; position:relative; margin:0 auto;height:771px;background-image:url(//img11.360buyimg.com/cms/jfs/t13093/33/1217187159/211324/5345b41a/5a1ce0baN7567558e.jpg)"> 
 </div> 
 <div style="position: absolute; left: 130px; text-align: center; line-height: 24px; font-size: 15px; font-family: '微软雅黑'; color: #eee; height: 56px; width: 514px; top: 2063px;"> 
  <p>荣耀V10搭载麒麟970人工智能芯片，加上6GB大内存*1和EMUI 8.0智慧系统，使得拍照、游戏、视频、日常生活等都变得畅快灵动，而这一切都通过一块5.99英寸的全面屏*2大视野精妙地展现。 </p> 
 </div> 
 <div style="width:750px; position:relative; margin:0 auto;height:752px;background-image:url(//img20.360buyimg.com/cms/jfs/t12973/295/1214107507/215564/dfb9de24/5a1ce189Nd0076a81.jpg)"> 
 </div> 
 <div style="position: absolute; left: 197px; text-align: right; line-height: 22px; font-size: 15px; font-family: '微软雅黑'; color: #eee; height: 133px; width: 539px; top: 3222px;"> 
  <p> 什么是性能怪兽？新一代麒麟970 AI芯片，CPU采用10nm 的芯片工艺，与上一代相比能效提升20%*3；GPU采用全新升级12 核的Mali G72，与上一代相比图形处理性能提升20%，能效提升50%， 运行大型3D游戏更流畅*3。麒麟970 人工智能芯片内置神经网络处理单元（NPU），可深度理解用户行为、归纳同类计算、自主学习，让手机“更懂你”。 </p> 
 </div> 
 <div style="width:750px; position:relative; margin:0 auto;height:665px;background-image:url(//img13.360buyimg.com/cms/jfs/t12967/210/1215719016/181169/ba973570/5a1ce315N1a5d097b.jpg)"> 
 </div> 
 <div style="position: absolute; left: 115px; text-align: center; line-height: 22px; font-size: 15px; font-family: '微软雅黑'; color: #eee; height: 80px; width: 540px; top: 3592px;"> 
  <p> 开启游戏助手可提升游戏性能并降低网络延时，保证游戏运行更流畅。贴心的游戏免打扰功能，团战时刻，电话、微信信息请稍等！ </p> 
 </div> 
 <div style="width:750px; position:relative; margin:0 auto;height:641px;background-image:url(//img20.360buyimg.com/cms/jfs/t13555/297/1198891271/264599/d0928d54/5a1ce437Ne2da9819.jpg)"> 
 </div> 
 <div style="position: absolute; left: 432px; text-align: right; line-height: 22px; font-size: 15px; font-family: '微软雅黑'; color: #eee; height: 98px; width: 283px; top: 4437px;"> 
  <p> 5.99英寸的18:9屏幕，只为带来更丰富、更沉浸式的视觉体验，看电影玩游戏更痛快；突破边框的设计，让手机机身更窄也更方便握持 </p> 
 </div> 
 <div style="width:750px; position:relative; margin:0 auto;height:674px;background-image:url(//img13.360buyimg.com/cms/jfs/t12694/106/1237119133/191485/df66582b/5a1ce594N6ad6e559.jpg)"> 
 </div> 
 <div style="position: absolute; left: 32px; text-align: left; line-height: 22px; font-size: 15px; font-family: '微软雅黑'; color: #eee; height: 98px; width: 283px; top: 5044px;"> 
  <p> 荣耀V10的背部采用微米级金属雕刻工艺，金属泛溢着玻璃的流光，光影氤氲着金属的质感。 </p> 
 </div> 
 <div style="width:750px; position:relative; margin:0 auto;height:647px;background-image:url(//img10.360buyimg.com/cms/jfs/t11002/306/2726182310/275297/6a12769d/5a1ce665Nfaf3fff9.jpg)"> 
 </div> 
 <div style="position: absolute; left: 144px; text-align: center; line-height: 22px; font-size: 15px; font-family: '微软雅黑'; color: #eee; height: 127px; width: 472px; top: 5662px;"> 
  <p> EMUI8.0智慧系统基于人工智能2.0进行多核异构资源调度，能让应用资源感知调度，大幅提升系统流畅性，500天长时间使用依然流畅*5</p> 
 </div> 
 <div style="width:750px; position:relative; margin:0 auto;height:660px;background-image:url(//img30.360buyimg.com/cms/jfs/t14017/284/1412694052/203515/c145171a/5a1fa8fdNad73e321.jpg)"> 
 </div> 
 <div style="position: absolute; left: 64px; text-align: center; line-height: 22px; font-size: 15px; font-family: '微软雅黑'; color: #eee; height: 127px; width: 680px; top: 6158px;"> 
  <p> 新的操作系统让手机变得更聪明也“更懂你”，多种智慧化功能让您的生活更便捷 </p> 
 </div> 
 <div style="width:750px; position:relative; margin:0 auto;height:475px;background-image:url(//img11.360buyimg.com/cms/jfs/t12805/206/1249830479/143764/fcff38b7/5a1ce831N56838b58.jpg)"> 
 </div> 
 <div style="width:750px; position:relative; margin:0 auto;height:531px;background-image:url(//img20.360buyimg.com/cms/jfs/t11254/262/2729906387/87123/963d4b8e/5a1ceda8Nebc4ecac.jpg)"> 
 </div> 
 <div style="position: absolute; left: 56px; text-align: center; line-height: 22px; font-size: 15px; font-family: '微软雅黑'; color: #eee; height: 67px; width: 654px; top: 7302px;"> 
  <p> 2000万像素黑白镜头捕捉层次和细节，1600万像素彩色镜头捕捉色彩，双F1.8大光圈，2 in 1 PDAF双核对焦技术，配合新一代双ISP图像处理器，抓拍更美更清晰，放大两倍拍摄依然清晰</p> 
 </div> 
 <div style="width:750px; position:relative; margin:0 auto;height:730px;background-image:url(//img30.360buyimg.com/cms/jfs/t14161/183/1275259226/219064/6823358c/5a1cee9cN63dd4fbe.jpg)"> 
 </div> 
 <div style="position: absolute; left: 63px; text-align: center; line-height: 22px; font-size: 15px; font-family: '微软雅黑'; color: #eee; height: 138px; width: 654px; top: 7846px;"> 
  <p> 拍什么都像专业摄影师，智能识别人像、美食、夜景等13种拍照场景，针对性提供合适的拍照参数设置，拍什么、在哪拍，每一拍都是大片。</p> 
 </div> 
 <div style="width:750px; position:relative; margin:0 auto;height:682px;background-image:url(//img20.360buyimg.com/cms/jfs/t12769/27/1196807239/145062/99e62a2e/5a1cef3dN89abd3d1.jpg)"> 
 </div> 
 <div style="position: absolute; left: 425px; text-align: right; line-height: 22px; font-size: 15px; font-family: '微软雅黑'; color: #eee; height: 142px; width: 283px; top: 8796px;"> 
  <p> 识别运动场景，设置更合适的参数，每次拍摄都能抓到满意的瞬间。</p> 
 </div> 
 <div style="width:750px; position:relative; margin:0 auto;height:684px;background-image:url(//img11.360buyimg.com/cms/jfs/t13315/362/1245603047/136881/57134472/5a1cf016N4b342f04.jpg)"> 
 </div> 
 <div style="position: absolute; left: 429px; text-align: right; line-height: 22px; font-size: 15px; font-family: '微软雅黑'; color: #eee; height: 142px; width: 303px; top: 9566px;"> 
  <p> 前置自拍AI人像模式，基于AI算法背景虚化更准确，人像更突出，自拍更美。</p> 
 </div> 
 <div style="width:750px; position:relative; margin:0 auto;height:640px;background-image:url(//img20.360buyimg.com/cms/jfs/t13828/224/1379345941/177714/a70da8d7/5a1face4N6cea2b33.jpg)"> 
 </div> 
 <div style="position: absolute; left: 27px; text-align: left; line-height: 22px; font-size: 15px; font-family: '微软雅黑'; color: #eee; height: 117px; width: 339px; top: 10227px;"> 
  <p> 采用Honor SuperCharge快充技术，一次 充满电，一天用不完。智能管理荣耀V10的电量， 有效控制各耗电应用，在充满电的情况下，可连续玩大型游戏5.5小时，本地视频播放19小时，音乐播放160小时，4G上网21小时，3G通话23小时*8。</p> 
 </div> 
 <div style="width:750px; position:relative; margin:0 auto;height:633px;background-image:url(//img12.360buyimg.com/cms/jfs/t12721/235/1243434866/154143/98b5bfca/5a1cf16dN78199eb3.jpg)"> 
 </div> 
 <div style="position: absolute; left: 484px; text-align: right; line-height: 22px; font-size: 15px; font-family: '微软雅黑'; color: #eee; height: 117px; width: 233px; top: 10836px;"> 
  <p> 支持62家银行，支持超过1500万个手机闪付POS终端</p> 
 </div> 
 <div style="position: absolute; left: 368px; text-align: right; line-height: 22px; font-size: 15px; font-family: '微软雅黑'; color: #eee; height: 72px; width: 349px; top: 11020px;"> 
  <p> 支持全国交通一卡通互联互通标准，覆盖北上广深等 160+ 城市公共交通*10</p> 
 </div> 
 <div style="width:750px; position:relative; margin:0 auto;height:800px;background-image:url(//img14.360buyimg.com/cms/jfs/t12733/325/1275376677/212258/35d6f574/5a1cf29cN4c282c0d.jpg)"> 
 </div> 
 <div style="position: absolute; left: 41px; text-align: left; line-height: 22px; font-size: 15px; font-family: '微软雅黑'; color: #eee; height: 117px; width: 233px; top: 11533px;"> 
  <p> 一键连接 80+国家/地区精品网络 、 60+目的地4G高速上网 一键预订 200+国家的140万+酒店/民宿*11</p> 
 </div> 
 <div style="width:750px; position:relative; margin:0 auto;height:695px;background-image:url(//img12.360buyimg.com/cms/jfs/t11956/153/2693594848/189117/2ab7bcf9/5a1cf358N9c43366e.jpg)"> 
 </div> 
 <div style="position: absolute; left: 36px; text-align: left; line-height: 22px; font-size: 15px; font-family: '微软雅黑'; color: #eee; height: 117px; width: 233px; top: 12165px;"> 
  <p> 智慧全网通4.0带来双卡LTE/VoLTE功能，两张卡都可以同时驻留4G*12，信号覆盖更广更稳定。新的高铁模式3.0能智能识别高铁状态并切换到高铁模式，让高铁通话质量更优。</p> 
 </div> 
 <div style="width:750px; position:relative; margin:0 auto;height:600px;background-image:url(//img20.360buyimg.com/cms/jfs/t12706/123/1193031852/7333/cbdc60b1/5a1cf3feN5cfbad43.jpg)"> 
 </div> 
 <div style="position: absolute; left: 78px; text-align: left; line-height: 16px; font-size: 15px; font-family: '微软雅黑'; color: #eee; height: 257px; width: 565px; top: 12627px;"> 
  <p> *1另有4GB的版本可选</p> 
  <p>*2全面屏手机是目前业界通用的概念，通常认为是窄边框和高屏占比的手机，5.99英寸是显示屏直角的对角线长度。 </p> 
  <p>*3比较对象是与上一代麒麟960芯片</p> 
  <p> *4仅限魅丽红版本。</p> 
  <p> *5荣耀实验室环境下用工具来加速模拟500天使用场景；手机久用后存储碎片、存储文件、安装应用、应用数据、垃圾文件变多的情况下，荣耀V10依然保持流畅；真实情况依据个人使用习惯不同有差异。 </p> 
  <p>*6后续HOTA升级支持。</p> 
  <p> *7黑白2000万+彩色1600万像素双摄像头，变焦功能在部分拍摄模式下受限。 </p> 
  <p>*8以上均为荣耀功耗模型测试数据，实际待机时间和使用时间取决于网络等多种因素。 </p> 
  <p>*9电池容量为典型值 </p> 
  <p>*10广西交通一卡通符合全国交通一卡通互联互通标准，该标准覆盖全国160多个城市公共交通系统。实际可用情况以当地交通一卡通运营机构口径为准，刷卡时请认准刷卡设备上的“交通联合”标识</p> 
  <p> *11 中文预订全球酒店服务与Booking.com达成战略合作，具体上线时间请以官方公告为准，请关注后续升级通知。 </p> 
  <p>*12 双卡4G网络使用，需要根据运营商网络和相关业务部署情况确定是否支持，后续手机软件功能可能跟随网络匹配升级，请以手机实际版本支持功能为准。不支持两张电信卡同时使用。</p> 
 </div> 
 <div style=" position:relative; width:750px; margin:0 auto;height:237px; background-image:url(//img12.360buyimg.com/cms/jfs/t3079/49/3883835285/37403/9b4539cc/57fb1a54N5c1ebfbb.jpg);"> 
  <div style="position: absolute; left: 58px; text-align: left; line-height: 16px; font-size: 10px; font-family: '方正兰亭中黑_GBK'; color: #555; height: 50px; width: 650px; top: 150px;"> 
   <ul style="list-style-type:disc; list-style-position : outside;margin:0; padding:0;"> 
    <li style="margin:3px 0; list-style:none;">为尽可能保障普通客户的购买需求，避免“黄牛“囤积货物，抬价转售，损害普通客户利益。特此约定，同一客户，仅限 购买1台。执行方式，若遇同一ID购买多台，最多发1台；若遇不同ID但具备下列现象之一：批量相同（包括雷同、临近、 虚构）的收购地址、联系号码、收件人（巧合同名除外）、均视为同一客户、最多发1台 </li> 
   </ul> 
  </div> 
 </div> 
 <div style=" position:relative; width:750px; margin:0 auto;height:173px; background-image:url(//img14.360buyimg.com/cms/jfs/t3664/195/80848320/46162/a4fae638/57fe07b4N2d47821c.jpg
); margin-bottom:10px;"> 
  <div style="position: absolute; left: 83px; text-align: left; line-height: 16px; font-size: 10px; font-family: '方正兰亭中黑_GBK'; color: #555; height: 40px; width: 641px; top: 122px;"> 
   <ul style="list-style-type:disc; list-style-position : outside;margin:0; padding:0;"> 
    <li style="margin:3px 0; list-style:none;">如因质量问题或故障，请您<span style="color:#c30d23;">携带好购机发票</span>前往华为售后网点检测，凭华为售后网点的检测单，享受7日内退货，15日内换货，15日以上在质保期内如检测符合保修享受免费保修等三包服务；或拨打华为终端客服热线4008308300申请寄修服务、联系京东在线客服申请售后； </li> 
   </ul> 
  </div> 
 </div> 
 <div style=" position:relative; width:750px; margin:0 auto;height:29px; "> 
  <div style="position: absolute; height: 29px; width: 750px;"> 
   <map name="Map" id="Map"> <area shape="rect" coords="293,0,456,26" href="https://help.jd.com/user/custom.html" target="_blank"></area> </map> 
  </div> 
 </div> 
 <div style=" position:relative; width:750px; margin:0 auto;height:154px; background-image:url(//img11.360buyimg.com/cms/jfs/t3238/247/3897876947/8810/8d1a7b5a/57fb171eN0eb5568c.jpg
);"> 
  <div style="position: absolute; left: 73px;  line-height: 18px; font-size: 12px; font-family: '方正兰亭中黑_GBK'; color: #555; height: 130px; width: 600px; top: 30px;"> 
   <ul style="list-style-type:disc; list-style-position : outside;margin:0; padding:0;"> 
    <li style="margin:3px 0; list-style:none;">京东网站<span style="color:#c30d23;">所售商品都是正品行货</span>，均开具正规发票（图书商品用户自由选择是否开发票），发票金额含配送费金额，另有说明的除外。<br /> 1.?如何获得普通纸质发票：下单时选择“普通发票（纸质）”自助开取，此发票可用作单位报销凭证，一个订单对应一张或多张发票，不同的物流中心发出的包裹开具不同的发票，发票会随每次包裹一同发出。<br /> 2.?如何获得普通电子发票：下单时选择“普通发票（电子）”自助开取，订单完成后，系统会自动开具，用户可登陆京东个人账户，在订单详情页-付款信息页面下载。电子发票是税务局认可的有效收付款凭证，具有售后维权的法律效力，可用于单位报销使用。个人用户选择开具电子发票后无法换取个人抬头的普通纸质发票。<br /> <span style="color:#c30d23;">注：下单系统默认为电子发票，若需要纸质发票时，请自行选择，如下图所示:</span> </li> 
   </ul> 
  </div> 
 </div> 
 <div style=" position:relative; width:750px; margin:0 auto;height:411px; background-image:url(//img11.360buyimg.com/cms/jfs/t3292/216/3770021737/93841/c373eb30/57fb2029N6c007004.jpg
); margin-top:70px;"> 
 </div> 
 <div style=" position:relative; width:750px; margin:0 auto;height:305px; background-image:url(//img13.360buyimg.com/cms/jfs/t3046/294/3885099478/50059/d4a134de/57fb171eN2b55fae4.jpg
);"> 
  <div style="position: absolute; left: 65px; text-align: left; line-height: 17px; font-size: 12px; font-family: '方正兰亭中黑_GBK'; color: #555; height: 208px; width: 610px; top: 30px;"> 
   <ul style="list-style-type:disc; list-style-position : outside;margin:0; padding:0;"> 
    <li style="margin:3px 0; list-style:none;">由京东快递发货的自营（非自提）订单，在订单打印之前可以修改，打开“订单详情”页面，点击右上角的“修改订单”即可，<span style="color:#c30d23;">若没有修改订单按钮，则表示订单无法修改。</span><br /> 1、修改订单可能影响送货时间。<br /> 2、修改时将以当前商品信息为准，修改时需要注意查看活动信息。<br /> 3、由于订单生产速度快，可能出现修改不成功的情况。 </li> 
   </ul> 
  </div> 
  <div style="position: absolute; left: 65px; text-align: left; line-height: 17px; font-size: 12px; font-family: '方正兰亭中黑_GBK'; color: #555; height: 158px; width: 610px; top: 156px;"> 
   <ul style="list-style-type:disc; list-style-position : outside;margin:0; padding:0;"> 
    <li style="margin:3px 0; list-style:none;">若商品页面中，显示“无货”时：<span style="color:#c30d23;">商品具体的到货时间是无法确定的</span>，您可以通过商品页面的“到货通知”功能获得商品到货提醒。（如下图）</li> 
   </ul> 
  </div> 
 </div> 
 <div style=" position:relative; width:750px; margin:0 auto;height:526px; "> 
  <div style="position: absolute; height: 526px; width: 750px;"> 
   <img src="//img11.360buyimg.com/cms/jfs/t3214/283/3929619386/122957/5c3e8c9f/57fb4913N0cd7d13b.jpg" usemap="#Map2" border="0" /> 
   <map name="Map2" id="Map2"> <area shape="rect" coords="35,56,202,267" href="https://order.jd.com/center/list.action" target="_blank"></area> <area shape="rect" coords="208,58,375,264" href="https://myjd-crm.jd.com/reminder/reminderlist.action" target="_blank"></area> <area shape="rect" coords="379,52,551,264" href="https://help.jd.com/user/issue/103-983.html" target="_blank"></area> <area shape="rect" coords="555,54,726,266" href="https://help.jd.com/user/issue/321-981.html" target="_blank"></area> <area shape="rect" coords="32,271,202,479" href="https://myjd.jd.com/afs/indexNew.action " target="_blank"></area> <area shape="rect" coords="207,271,370,476" href="https://order.jd.com/center/list.action" target="_blank"></area> <area shape="rect" coords="376,271,549,481" href="https://mymoney.jd.com/finance/recently.action" target="_blank"></area> <area shape="rect" coords="553,270,727,481" href="https://safe.jd.com/user/paymentpassword/safetyCenter.action" target="_blank"></area> <area shape="rect" coords="259,490,511,522" href="https://help.jd.com/user/index.html" target="_blank"></area> </map> 
  </div> 
 </div> 
 <div style=" position:relative; width:750px; margin:0 auto;height:288px; "> 
  <div style="position: absolute; height: 288px; width: 750px;"> 
   <img src="//img30.360buyimg.com/cms/jfs/t3286/269/4159670339/96338/ec947cd8/57fb171eN29428fb4.jpg" usemap="#Map3" border="0" /> 
   <map name="Map3" id="Map3"> <area shape="rect" coords="286,217,463,288" href="#top"></area> </map> 
  </div> 
 </div> 
</div><br/></div>
								</div>
							</div>
							<div id="two" class="tab-pane">
								<div class="Ptable">
									<div class="Ptable-item" v-for="group in specGroups" :key="group.id">
										<h3 v-text="group.name"></h3>
										<dl>
            <span v-for="param in group.params" :key="param.id">
				<dt v-text="param.name"></dt><dd v-text="param.value + (param.unit || '')"></dd>
			</span>
										</dl>
									</div>
								</div>
								<div class="package-list">
									<h3>包装清单</h3>
									<p>1）手机 x 1； 2）电池（内置）x 1； 3）快速指南 x 1；4）5V4.5A SuperCharge充电器 x 1；5）三包凭证 x 1；6）Type-C数据线 x 1；7）卡座捅针 x 1；8）TPU保护壳 x 1；9）荣耀宣传卡片 x 1。</p>
								</div>

							</div>
							<div id="three" class="tab-pane">
								<p>本产品全国联保，享受三包服务，质保期为：一年质保</p>
							</div>
							<div id="four" class="tab-pane">
								<p>商品评价</p>
							</div>
							<div id="five" class="tab-pane">
								<p>手机社区</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--like-->
			<div class="clearfix"></div>
			<div class="like">
				<h4 class="kt">猜你喜欢</h4>
				<div class="like-list">
					<ul class="yui3-g">
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike01.png"/>
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
										<em>¥</em>
										<i>3699.00</i>
									</strong>
								</div>
								<div class="commit">
									<i class="command">已有6人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike02.png"/>
								</div>
								<div class="attr">
									<em>Apple苹果iPhone 6s/6s Plus 16G 64G 128G</em>
								</div>
								<div class="price">
									<strong>
										<em>¥</em>
										<i>4388.00</i>
									</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike03.png"/>
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
										<em>¥</em>
										<i>4088.00</i>
									</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike04.png"/>
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
										<em>¥</em>
										<i>4088.00</i>
									</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike05.png"/>
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
										<em>¥</em>
										<i>4088.00</i>
									</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike06.png"/>
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
										<em>¥</em>
										<i>4088.00</i>
									</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/common.js"></script>

<script>
	const specialSpec = JSON.parse("{\"4\":[\"\u5E7B\u591C\u9ED1\",\"\u9B45\u4E3D\u7EA2\",\"\u6781\u5149\u84DD\",\"\u6C99\u6EE9\u91D1\"],\"12\":[\"6GB\"],\"13\":[\"64GB\"]}");
	const genericSpec = JSON.parse("{\"1\":\"\u534E\u4E3A\uFF08HUAWEI\uFF09\",\"2\":\"\u8363\u8000V10\",\"3\":2017.0,\"5\":172,\"6\":\"\u91D1\u5C5E\",\"7\":\"Android\",\"8\":\"\u6D77\u601D\uFF08Hisilicon\uFF09\",\"9\":\"\u9E92\u9E9F970\",\"10\":\"CPU\u6838\u6570\u516B\u6838 + \u5FAE\u667A\u6838i7\",\"11\":2.36,\"14\":5.99,\"15\":\"2160*1080(FHD)\",\"16\":1300.0,\"17\":1600.0,\"18\":3750.0}");
	const skus = [{"id":5821455,"spuId":36,"title":"\u8363\u8000 V10 \u9AD8\u914D\u7248 6GB+64GB \u6781\u5149\u84DD \u79FB\u52A8\u8054\u901A\u7535\u4FE14G\u5168\u9762\u5C4F\u6E38\u620F\u624B\u673A \u53CC\u5361\u53CC\u5F85","images":"http:\/\/image.leyou.com\/images\/12\/3\/1524297373493.jpg","price":279900,"ownSpec":"{\"4\":\"\u6781\u5149\u84DD\",\"12\":\"6GB\",\"13\":\"64GB\"}","indexes":"2_0_0","enable":true,"createTime":"2018-04-21T15:56:13.000+08:00","lastUpdateTime":"2018-04-21T15:56:13.000+08:00","stock":9999},{"id":5853575,"spuId":36,"title":"\u8363\u8000 V10 \u9AD8\u914D\u7248 6GB+64GB \u6C99\u6EE9\u91D1 \u79FB\u52A8\u8054\u901A\u7535\u4FE14G\u5168\u9762\u5C4F\u6E38\u620F\u624B\u673A \u53CC\u5361\u53CC\u5F85","images":"http:\/\/image.leyou.com\/images\/4\/8\/1524297373798.jpg","price":279900,"ownSpec":"{\"4\":\"\u6C99\u6EE9\u91D1\",\"12\":\"6GB\",\"13\":\"64GB\"}","indexes":"3_0_0","enable":true,"createTime":"2018-04-21T15:56:14.000+08:00","lastUpdateTime":"2018-04-21T15:56:14.000+08:00","stock":9999},{"id":5853579,"spuId":36,"title":"\u8363\u8000 V10 \u9AD8\u914D\u7248 6GB+64GB \u5E7B\u591C\u9ED1 \u79FB\u52A8\u8054\u901A\u7535\u4FE14G\u5168\u9762\u5C4F\u6E38\u620F\u624B\u673A \u53CC\u5361\u53CC\u5F85","images":"http:\/\/image.leyou.com\/images\/4\/8\/1524297372500.jpg","price":279900,"ownSpec":"{\"4\":\"\u5E7B\u591C\u9ED1\",\"12\":\"6GB\",\"13\":\"64GB\"}","indexes":"0_0_0","enable":true,"createTime":"2018-04-21T15:56:12.000+08:00","lastUpdateTime":"2018-04-21T15:56:12.000+08:00","stock":9999},{"id":5924266,"spuId":36,"title":"\u8363\u8000 V10 \u9AD8\u914D\u7248 6GB+64GB \u9B45\u4E3D\u7EA2 \u79FB\u52A8\u8054\u901A\u7535\u4FE14G\u5168\u9762\u5C4F\u6E38\u620F\u624B\u673A \u53CC\u5361\u53CC\u5F85","images":"http:\/\/image.leyou.com\/images\/14\/1\/1524297373088.jpg","price":279900,"ownSpec":"{\"4\":\"\u9B45\u4E3D\u7EA2\",\"12\":\"6GB\",\"13\":\"64GB\"}","indexes":"1_0_0","enable":true,"createTime":"2018-04-21T15:56:13.000+08:00","lastUpdateTime":"2018-04-21T15:56:13.000+08:00","stock":9999}];
	const specs = [{"id":1,"cid":76,"name":"\u4E3B\u4F53","params":[{"id":1,"cid":76,"groupId":1,"name":"\u54C1\u724C","numeric":false,"unit":"","generic":true,"searching":false,"segments":""},{"id":2,"cid":76,"groupId":1,"name":"\u578B\u53F7","numeric":false,"unit":"","generic":true,"searching":false,"segments":""},{"id":3,"cid":76,"groupId":1,"name":"\u4E0A\u5E02\u5E74\u4EFD","numeric":true,"unit":"\u5E74","generic":true,"searching":false,"segments":""}]},{"id":2,"cid":76,"name":"\u57FA\u672C\u4FE1\u606F","params":[{"id":4,"cid":76,"groupId":2,"name":"\u673A\u8EAB\u989C\u8272","numeric":false,"unit":"","generic":false,"searching":false,"segments":""},{"id":5,"cid":76,"groupId":2,"name":"\u673A\u8EAB\u91CD\u91CF\uFF08g\uFF09","numeric":true,"unit":"g","generic":true,"searching":false,"segments":""},{"id":6,"cid":76,"groupId":2,"name":"\u673A\u8EAB\u6750\u8D28\u5DE5\u827A","numeric":false,"unit":"","generic":true,"searching":false,"segments":""}]},{"id":3,"cid":76,"name":"\u64CD\u4F5C\u7CFB\u7EDF","params":[{"id":7,"cid":76,"groupId":3,"name":"\u64CD\u4F5C\u7CFB\u7EDF","numeric":false,"unit":"","generic":true,"searching":true,"segments":""}]},{"id":4,"cid":76,"name":"\u4E3B\u82AF\u7247","params":[{"id":8,"cid":76,"groupId":4,"name":"CPU\u54C1\u724C","numeric":false,"unit":"","generic":true,"searching":true,"segments":""},{"id":9,"cid":76,"groupId":4,"name":"CPU\u578B\u53F7","numeric":false,"unit":"","generic":true,"searching":false,"segments":""},{"id":10,"cid":76,"groupId":4,"name":"CPU\u6838\u6570","numeric":false,"unit":"","generic":true,"searching":true,"segments":""},{"id":11,"cid":76,"groupId":4,"name":"CPU\u9891\u7387","numeric":true,"unit":"GHz","generic":true,"searching":true,"segments":"0-1.0,1.0-1.5,1.5-2.0,2.0-2.5,2.5-"}]},{"id":5,"cid":76,"name":"\u5B58\u50A8","params":[{"id":12,"cid":76,"groupId":5,"name":"\u5185\u5B58","numeric":false,"unit":"","generic":false,"searching":true,"segments":""},{"id":13,"cid":76,"groupId":5,"name":"\u673A\u8EAB\u5B58\u50A8","numeric":false,"unit":"","generic":false,"searching":true,"segments":""}]},{"id":6,"cid":76,"name":"\u6444\u50CF\u5934","params":[{"id":16,"cid":76,"groupId":6,"name":"\u524D\u7F6E\u6444\u50CF\u5934","numeric":true,"unit":"\u4E07","generic":true,"searching":true,"segments":"0-500,500-1000,1000-1500,1500-2000,2500-"},{"id":17,"cid":76,"groupId":6,"name":"\u540E\u7F6E\u6444\u50CF\u5934","numeric":true,"unit":"\u4E07","generic":true,"searching":true,"segments":"0-500,500-1000,1000-1500,1500-2000,2500-"}]},{"id":7,"cid":76,"name":"\u7535\u6C60\u4FE1\u606F","params":[{"id":18,"cid":76,"groupId":7,"name":"\u7535\u6C60\u5BB9\u91CF\uFF08mAh\uFF09","numeric":true,"unit":"mAh","generic":true,"searching":true,"segments":"0-2000,2000-3000,3000-4000,4000-"}]},{"id":11,"cid":76,"name":"\u5C4F\u5E55","params":[{"id":14,"cid":76,"groupId":11,"name":"\u4E3B\u5C4F\u5E55\u5C3A\u5BF8\uFF08\u82F1\u5BF8\uFF09","numeric":true,"unit":"\u82F1\u5BF8","generic":true,"searching":true,"segments":"0-4.0,4.0-5.0,5.0-5.5,5.5-6.0,6.0-"},{"id":15,"cid":76,"groupId":11,"name":"\u5206\u8FA8\u7387","numeric":false,"unit":"","generic":true,"searching":false,"segments":""}]}];
	const params = {};
	specs.forEach(group => {
		group.params.forEach(param => {
			params[param.id] = param.name;
		})
	});
	// 初始化特有规格参数默认选中一个
	const indexes = {};
	const initIndex = skus[0].indexes.split("_");
	Object.keys(specialSpec).forEach((id, i) => {
		indexes[id] = parseInt(initIndex[i]);
	})
	const indexArr = skus.map(s => s.indexes);
</script>
<script>
	var itemVm = new Vue({
		el: "#itemApp",
		data: {
			ly,
			specialSpec,// 特有规格参数模板
			params,// 参数对象数组
			indexes,// 初始化被选中的参数
			num: 1,
		},
		methods: {
			decrement() {
				if (this.num > 1) {
					this.num--;
				}
			},
			increment() {
				this.num++;
			},
			addCart() {
				// 判断是否登录
				ly.http.get("/auth/verify").then(() => {
					// 已登录
					ly.http.post("/cart", {
						skuId: this.sku.id,
						title: this.sku.title,
						image: this.images[0],
						price: this.sku.price,
						num: this.num,
						ownSpec: JSON.stringify(this.ownSpec)
					}).then(() => {
						// 跳转到购物车列表页
						window.location.href = "http://www.leyou.com/cart.html";
					}).catch(() => {
						alert("添加购物车失败，请重试！");
					})
				}).catch(() => {
					// 获取以前的购物车
					const carts = ly.store.get("carts") || [];
					// 获取与当前商品id一致的购物车数据
					const cart = carts.find(c => c.skuId === this.sku.id);
					if (cart) {
						// 存在，修改数量
						cart.num += this.num;
					} else {
						// 不存在，新增
						carts.push({
							skuId: this.sku.id,
							title: this.sku.title,
							image: this.images[0],
							price: this.sku.price,
							num: this.num,
							ownSpec: JSON.stringify(this.ownSpec)
						})
					}
					// 未登录
					ly.store.set("carts", carts);
					// 跳转到购物车列表页
					window.location.href = "http://www.leyou.com/cart.html";
				})
			},
			locked(id, i) {
				// 如果只有一个可选项，永不锁定
				if(specialSpec[id].length === 1) return false;
				// 如果有其它项未选，不锁定
				let boo = true;
				Object.keys(this.indexes).forEach(key => {
					if (key !== id && this.indexes[key] == null) {
						boo = false;
						return;
					}
				});
				if (!boo) return false;
				// 如果当前项的组合不存在，锁定
				const {...o} = this.indexes;
				o[id] = i;
				const index = Object.values(o).join("_");
				return !indexArr.includes(index);
			},
			selectSku(id, i) {
				// 先判断当前选中的是否是锁定项
				const isLocked = this.locked(id, i);
				// 无论是否是锁定项，都允许修改
				this.indexes[id] = i;
				// 如果是锁定项，则需要调整其它项的选中状态
				if (isLocked) {
					Object.keys(this.indexes).forEach(key => {
						if (key !== id) {
							const remainSpec = specialSpec[key].filter((e, j) => !this.locked(key, j));
							this.indexes[key] = remainSpec.length === 1 ? specialSpec[key].findIndex(e => e === remainSpec[0]) : null;
						}
					})
				}
			}
		},
		computed: {
			sku() {
				if (Object.values(this.indexes).includes(null)) {
					return skus[0];
				}
				// 获取选中的规格参数的索引
				const index = Object.values(this.indexes).join("_");
				// 去skus集合寻找与index一致的sku
				return skus.find(s => s.indexes === index);
			},
			images() {
				return this.sku.images ? this.sku.images.split(",") : [];
			},
			specGroups() {
				// 获取特有规格参数值
				const ownSpec = JSON.parse(this.sku.ownSpec);
				specs.forEach(group => {
					group.params.forEach(param => {
						if (param.generic) {
							param.value = genericSpec[param.id];
						} else {
							param.value = ownSpec[param.id];
						}
					})
				})
				return specs;
			},
			ownSpec() {
				const ownSpec = JSON.parse(this.sku.ownSpec);
				const obj = {};
				Object.keys(ownSpec).forEach(id => {
					obj[this.params[id]] = ownSpec[id];
				})
				return obj;
			}
		},
		components: {
			lyTop: () => import('/js/pages/top.js')
		}
	});
</script>

<script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
	$(function () {
		$("#service").hover(function () {
			$(".service").show();
		}, function () {
			$(".service").hide();
		});
		$("#shopcar").hover(function () {
			$("#shopcarlist").show();
		}, function () {
			$("#shopcarlist").hide();
		});
	})
</script>
<script type="text/javascript" src="/js/model/cartModel.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="/js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/jquery.jqzoom.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/zoom.js"></script>
<script type="text/javascript" src="index/index.js"></script>
</body>

</html>